<template>
  <section class="tableList-wrapper">
    <ul class="title-box">
      <li class="title-name">工单单位</li>
      <li class="list-content">受理内容</li>
      <li class="list-time">受理时间</li>
    </ul>
    <div class="table-content" ref="tableList" @mouseover="stopScroll" @mouseout="startScroll">
      <ul class="list-box" v-for="(item, index) in tableData" :key="index">
        <li class="list-item" :title="item.name">{{ item.name }}</li>
        <li class="list-item" :title="item.content">{{ item.content }}</li>
        <li class="list-item" :title="item.time">{{ item.time }}</li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  // props: ["tableData"],
  data(){
    return {
      tableData: [
        {
          name: "国网南充公司",
          content: "电压质量长时间异常",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网甘孜公司",
          content: "频繁停电",
          time: "2021-09-19 15:04:22",
        },
        {
          name: "国网凉山公司",
          content: "频繁停电",
          time: "2021-09-04 17:34:42",
        },
        {
          name: "国网资阳公司",
          content: "停电时间超长",
          time: "2021-09-22 21:04:02",
        },
        {
          name: "国网泸州公司",
          content: "频繁停电",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网眉山公司",
          content: "电压质量长时间异常",
          time: "2021-09-11 20:04:22",
        },
        {
          name: "国网绵阳公司",
          content: "频繁停电",
          time: "2021-09-20 20:04:22",
        },
        {
          name: "国网广安公司",
          content: "电压质量长时间异常",
          time: "2021-09-11 20:04:22",
        },
      ],
      timer: null
    }
  },
  mounted(){
    this.startScroll()
  },
  methods: {
    autoScroll(){
      if(this.$refs.tableList.scrollTop>=this.$refs.tableList.scrollHeight-this.$refs.tableList.clientHeight) {
        this.$refs.tableList.scrollTop = 0;
      } else {
        this.$refs.tableList.scrollTop = this.$refs.tableList.scrollTop+10;
      }
      
    },
    stopScroll(){
      console.log("停止")
      clearInterval(this.timer);
    },
    startScroll(){
      console.log("开始")
      this.timer = setInterval(this.autoScroll, 1000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
.tableList-wrapper {
  height: 100%;
  font-size: 12px;
  .title-box {
    display: flex;
    height: 30px;
    line-height: 30px;
    background: #17366e;
    text-align: center;
    li {
      width: 33%;
    }
  }
  // .list-name {
  //   width: 25%;
  // }
  // .list-content {
  //   width: 40%;
  // }
  // .list-time {
  //   width: 35%;
  // }
  .table-content {
    overflow: hidden auto;
    height: calc(100% - 30px);
    .list-box {
      display: flex;

      height: auto;
      border-bottom: 1px dotted #173970;
      .list-item {
        height: 36px;
        line-height: 36px;
        width: 32%;
        margin: 0 1%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>